<template>
  <div class="mod-sp__sppassaccount">
    <el-form :inline="true" :model="dataForm" @keyup.enter="getDataList()">
      <el-form-item>
        <el-select v-model="dataForm.matchId" placeholder="赛事" clearable filterable @change="getMatchItemList" :disabled="$route.query.id ? true : false">
          <el-option value="">全部</el-option>
          <el-option v-for="item in matchList" :key="item.id" :label="item.matchName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.matchItemId" placeholder="赛项" clearable filterable :disabled="$route.query.id ? true : false">
          <el-option value="">全部</el-option>
          <el-option v-for="item in matchItemList" :key="item.id" :label="item.baseMatchItemName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.groupId" placeholder="组别">
          <el-option value="">全部</el-option>
          <el-option v-for="item in groupsList" :key="item.id" :label="item.dictLabel" :value="item.id"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.search" placeholder="模糊搜索" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.state" placeholder="选择状态">
          <el-option label="全部" value=""></el-option>
          <el-option label="未使用" value="0"></el-option>
          <el-option label="已使用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="使用时间" prop="Signup">
        <!-- 开始时间-->
        <el-date-picker v-model="dataForm.beginSignup" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="选择日期" style="width: 150px"></el-date-picker>
        ~
        <!-- 结束时间-->
        <el-date-picker v-model="dataForm.endSignup" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="选择日期" style="width: 150px"></el-date-picker>
      </el-form-item>



      <el-form-item>
        <el-button @click="getDataList()">{{ $t("query") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="importHandle()">导入</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="hasPermission('sp:sppassaccount:delete')" type="danger" @click="deleteHandle()">{{ $t("deleteBatch") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="downloadExcel()">下载模板</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="id" label="序号" header-align="center" align="center"></el-table-column>
      <el-table-column prop="account" label="账号" header-align="center" align="center"></el-table-column>
      <el-table-column prop="realName" label="姓名" header-align="center" align="center"></el-table-column>
      <el-table-column prop="matchName" label="赛事" header-align="center" align="center"></el-table-column>
      <el-table-column prop="matchItemName" label="赛项" header-align="center" align="center"></el-table-column>
      <el-table-column prop="groupName" label="组别" header-align="center" align="center"></el-table-column>
      <el-table-column prop="code" label="直通码" header-align="center" align="center"></el-table-column>
      <el-table-column prop="source" label="直通来源" header-align="center" align="center"></el-table-column>
      <el-table-column prop="state" label="状态" header-align="center" align="center">
        <template v-slot="scope">
          <el-tag v-if="scope.row.state === '0'" type="info">未使用</el-tag>
          <el-tag v-if="scope.row.state === '1'" type="success">已使用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="useTime" label="使用时间" header-align="center" align="center" width="200"></el-table-column>
      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
        <template v-slot="scope">
          <el-button v-if="hasPermission('sp:sppassaccount:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

    <el-dialog v-model="visible" title="Excel导入" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-upload name="file" :action="url" :file-list="fileList" drag :before-upload="beforeUploadHandle" :on-success="successHandle" class="text-center">
        <el-icon><upload /></el-icon>
        <div class="el-upload__text" v-html="$t('upload.text')"></div>
      </el-upload>
    </el-dialog>

  </div>
</template>

<script lang="ts">
import useView from "@/hooks/useView";
import { defineComponent, reactive, toRefs } from "vue";
import app from "@/constants/app";
import AddOrUpdate from "./sppassaccount-add-or-update.vue";
import {getToken} from "@/utils/cache";
import {IObject} from "@/types/interface";
import baseService from "@/service/baseService";
import {useStore} from "vuex";
import {getDictDataList} from "@/utils/utils";
export default defineComponent({
  components: {
    AddOrUpdate
  },
  setup() {
    const state = reactive({
      getDataListURL: "/sp/sppassaccount/page",
      getDataListIsPage: true,
      exportURL: "/sp/sppassaccount/export",
      deleteURL: "/sp/sppassaccount",
      deleteIsBatch: true,
      dataForm: {
        matchId: "",
        matchItemId: "",
        groupId: "",
        state: "",
        beginSignup: "",
        endSignup: "",
        search: ""
      },
      visible: false,
      url: "",
      fileList: [],
      groupsList: [],
      matchList: [],
      matchItemList: [] as IObject[]
    });
    return { ...useView(state), ...toRefs(state) };
  },
  watch: {
  },

  created() {
    this.selectMatch();
    this.getGroupsList();
  },


  methods: {

    /**
     * 查询所有赛事
     */
    selectMatch() {
      baseService.get("/sp/spmatch/page?limit=200").then((res) => {
        if (res.code == 0) {
          this.matchList = res.data.list;
        }
      });
    },

    /**
     * 查询赛项
     */
    getMatchItemList() {
      baseService.get("/sp/spmatchitem/list?matchId=" + this.dataForm.matchId).then((res) => {
        if (res.code == 0) {
          this.matchItemList = res.data;
        }
      });
    },

    getGroupsList() {
      const store = useStore();
      this.groupsList = getDictDataList(store.state.dicts, "groups");
    },

    // 在组件中使用
    downloadExcel(){
      const link = document.createElement('a')
      link.href = '/passcode.xlsx' // 文件放在public根目录
      link.download = '直通码备案模板.xlsx' // 下载时的文件名
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },

    importHandle() {
      this.visible = true;
      this.url = `${app.api}/demo/excel/importPassCode?token=${getToken()}`;
      this.fileList = [];
    },

    // 上传之前
    beforeUploadHandle() {
      //
    },
    // 上传成功
    successHandle(res: IObject) {
      if (res.code !== 0) {
        //下载失败的excel
        window.open(`${app.api}/demo/excel/exportPassCodeError?errorCode=`+res.msg+`&token=${getToken()}`);
        //return this.$message.error(res.msg);
        return;
      }
      this.$message({
        message: this.$t("prompt.success"),
        type: "success",
        duration: 500,
        onClose: () => {
          this.visible = false;
          this.getDataList();
        }
      });
    }
  }
});
</script>
